<template>
  <div>
    <el-header style="height:50px;">
      <el-row>
        <el-col :span="3">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="3">
          <el-link :underline="false" href="/recruit" target="_blank"><img class="logo" alt="logo"
                                                                        src="../../assets/img/logo.png"/></el-link>
        </el-col>
        <el-col :span="12" class="el-col-nav">
          <div class="grid-content bg-purple">
            <div class="pc">个人中心</div>
            <span class="icf">
              <el-link style="font-size:24px" :underline="false"
                                       class="el-icon-message" @click="showMsg"></el-link></span>
            <span class="icf">
              <el-link style="font-size:24px" :underline="false" href="http://localhost/recruit-company" target="_blank"
                                       class="iconfont icon-zhaopin"></el-link></span>
          </div>
        </el-col>
        <el-col :span="3"
                class="user_center">


          <el-dropdown>
            <div style="cursor: pointer">
              <el-avatar  style="height:40px;width:40px;vertical-align: middle;"
                          :src=user.photoUrl></el-avatar>
              <span class="user_name_style">{{ name }}</span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item ><span @click="logout()">退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>





        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </el-header>
  </div>
</template>

<script>

import {getPersonInfo} from "@/network/user";

export default {
  name: "PersonNav",
  data() {
    return {
      activeIndex: '',
      user:'',
      userName:'',
      name:'',
    };
  },
  mounted() {
    this.activeIndex = this.$router.currentRoute.fullPath;
    this.userName = localStorage.getItem("common_userName")
    this.personInfo();
  },
  methods: {
    handleSelect(key, keyPath) {
      if (this.key == null) {
        this.activeIndex != key;
      } else {
        this.activeIndex = key;
      }
      console.log(key, keyPath);
      if(localStorage.getItem("common_userName")){
        this.userName =localStorage.getItem("common_userName");
      }
      this.personInfo();
    },
    personInfo(){
      getPersonInfo(this.userName).then(res=>{
        this.user = res.data.data;
        if(this.user.pickName==undefined){
          this.name = this.user.userName;
        }else{
          this.name = this.user.pickName;
        }
      })
    },
    logout(){
      this.$store.dispatch("user/logout");
    },
    showMsg(){
      this.$router.push({name:'message'})
    }
  }
}
</script>

<style scoped>
.logo {
  height: 50px;
}

.grid-content {
  min-height: 50px;
  line-height: 50px;
  font-size: 14px;
}

.el-header {
  background: white;
  padding: 0;
  box-shadow: 0 5px 5px 0 #d9d8d8;
}

.pc {
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: #555;
}

.icf {
  font-size: 24px;
  float: right;
  padding-right: 25px
}

.user_center {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.user_name_style {
  padding-left: 10px;
  font-size: 14px;
  color: #256cd5
}
</style>